<script setup>
import SvgIcon from '@/components/SvgIcon/index.vue'

defineProps({
  isActive: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['toggleClick'])
function toggleClick() {
  emit('toggleClick')
}
</script>

<template>
  <div style="padding: 0 15px;" @click="toggleClick">
    <SvgIcon type="iconify" name="mdi:hamburger-open" :class="{ 'is-active': isActive }"  class="text-2xl relative top-1"/>
  </div>
</template>

<style scoped>
.hamburger {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}

.hamburger.is-active {
  transform: rotate(180deg);
}
</style>
